<template>
  <section
    id="VisitAccountsChart"
    class="dashboard"
  ></section>
</template>
<script>
  import { init } from 'echarts';

  export default {
    mounted() {
      this.createChart();
    },
    methods: {
      createChart() {
        const VisitAccountsChartChart = init(document.getElementById('VisitAccountsChart'));
        const option = {
          polar: {
            radius: [30, '80%'],
          },
          angleAxis: {
            max: 4,
            startAngle: 75,
          },
          radiusAxis: {
            type: 'category',
            data: ['a', 'b', 'c', 'd'],
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: [2, 1.2, 2.4, 3.6],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}',
            },
          },
        };

        option && VisitAccountsChartChart.setOption(option);
      },
    },
  };
</script>
<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 360px;
}
</style>
